<template>
    <div class="singer">
        
    </div>
</template>

<script>
import {getSingerList} from "@/api/singer.js"
import {ERR_OK} from '@/api/config'
export default {
    data(){
        return {
            singers:[]
        }
    },
    created(){
        this._getSingerList()
    },
    methods:{
        _getSingerList(){
            getSingerList().then((res)=>{
                if(res.code === ERR_OK){
                    let singerList = res.data.list
                    this._normalizeSinger(singerList)
                }
            })
        },
        _normalizeSinger(list){
            let map = {
                hot:{
                    title:"热门",
                    items:[]
                }
            }
            list.forEach((item,index)=>{
                if(index < 10){
                    map.hot.items.push({
                        id: item.Fsinger_mid,
                        name:item.Fsinger_name,
                        avatar:this._getSingerImgUrl(item.Fsinger_mid)
                    })
                }
                if(!map[item.Findex] && item.Findex.match(/[a-zA-Z]/)){
                    map[item.Findex] = {
                        title:item.Findex,
                        items:[]
                    }
                }
                if(!item.Findex.match(/[a-zA-Z]/)){
                    map.hot.items.push({
                        id: item.Fsinger_mid,
                        name:item.Fsinger_name,
                        avatar:this._getSingerImgUrl(item.Fsinger_mid)
                    })
                }
                if(map[item.Findex] && item.Findex.match(/[a-zA-Z]/)){
                    map[item.Findex].items.push({
                        id: item.Fsinger_mid,
                        name:item.Fsinger_name,
                        avatar:this._getSingerImgUrl(item.Fsinger_mid)
                    })
                }        
            })
            var ret = []
            var hot = []
            for(let key in map){
                if(map[key].title.match(/[a-zA-Z]/)){
                    ret.push(map[key])
                }else{
                    hot.push(map[key])
                }
            }
            ret.sort((a,b)=>{
                return a.title.charCodeAt(0) - b.title.charCodeAt(0)
            })
            map = hot.concat(ret)
            this.singers = map

        },
        _getSingerImgUrl(id){
            var url = `https://y.gtimg.cn/music/photo_new/T001R300x300M000${id}.jpg?max_age=2592000`
            return url
        }
    }
}
</script>

<style lang="stylus" scoped>
.singer
    position fixed
    width 100%
    top 88px
    bottom 0
</style>


